<script type="text/javascript"><!--
$(function() {
	
	/* Tooltips */
	$(".boxImagesInner a.galleryLink").hover(function(){
		$(this).children(".boxImagesInner a.galleryLink div.tooltip").fadeIn();
	}, function(e){
		$(this).children(".boxImagesInner a.galleryLink div.tooltip").hide();	
	});
	
	$(".boxImagesInner a.galleryLink").mousemove(function(e){
		$(this).children(".boxImagesInner a.galleryLink div.tooltip").css('top', e.pageY+15).css('left', e.pageX+15);	
	});
	
});
//--></script>

<div class="generalWrap">
	<h1 class="headingTitle">Gallery</h1>
	<p class="button">
		<a class="aButton" href="<?php echo site_url('photo') ?>">Back</a>
		<a class="aButton" href="<?php echo site_url('photo/add/'.$this->uri->segment(3)) ?>">Add</a>
	</p>
	<p class="pagination"><?php echo $pagination ?></p>

	<?php foreach ($images as $image) { ?>
	<div class="boxImagesInner">
		<a class="galleryLink" href="<?php echo $image['thumb'] ?>" rel="lightbox[gallery]" title="<?php echo $image['title_full'] ?>">
			<img class="image" src="<?php echo $image['thumb'] ?>" alt="" border="0" />
			<div class="tooltip"><?php echo $image['name'] ?></div>
		</a>
		<div>
			<a href="<?php echo $image['edit']['href'] ?>"><?php echo $image['edit']['title'] ?></a> |
			<a href="<?php echo $image['delete']['href'] ?>" onclick="return confirm('Are you sure you want to delete?')"><?php echo $image['delete']['title'] ?></a>
		</div>
	</div>
	<?php } ?>
	<div class="clear"></div>
	
	<p class="totalImages">Total: <?php echo $total ?></p>
</div>

<script type="text/javascript"><!--
$(function() {
	// remove title
	 
	$('.galleryLink').hover(
		function () {
			$(this).data('title', $(this).attr('title'));
			$(this).removeAttr('title');
		},
		function () {
			$(this).attr('title', $(this).data('title'));
		}
	); 
	

	// or ...

	//Here is the modern jQuery way to do it (IMO)...
	/*
	$('[title]').attr('title', function(i, title) {
		$(this).data('title', title).removeAttr('title');
	});
	*/

	//...and of course, reading the title attribute back is done with...

	//$('#whatever').data('title');



	// or

	// Hi all. I am using this solution and it works fine in all browsers.
	/*
	function hideTips(event) {  
		var saveAlt = $(this).attr('alt');
		var saveTitle = $(this).attr('title');
		if (event.type == 'mouseenter') {
			$(this).attr('title','');
			$(this).attr('alt','');
		} else {
			if (event.type == 'mouseleave'){
				$(this).attr('alt',saveAlt);
				$(this).attr('title',saveTitle);
			}
	   }
	}

	$(document).ready(function(){
	 $("a").live("hover", hideTips);
	});
	*/

});
//--></script>